<template>
	<view v-if="$root.g0!='{}'">
		<map id="maps" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline"
			:scale="scale" :style="'width:750rpx;'+'height:'+mapHeight+'px'+';'" v-if="longitude>0&&latitude>0"></map>
		<view class="back "
			:style="'top:'+systemInfo.statusBarHeight+'px'+';'+'width:'+navHeight+'px'+';'+'height:'+navHeight+'px'+';'">
			<view class="back-view " :style="'width:'+navHeight-10+'px'+';'+'height:'+navHeight-10+'px'+';'">
				<view v-if="opt.source&&opt.source=='share'">{{$root.g1}}</view>
				<image mode class="backImg " src="../../static/new/jiantou2.png" v-else></image>
			</view>
		</view>
		<view class="cancel " :style="'top:'+cacelBtnTop+'px'+';'+'height:'+navHeight+'px'+';'"
			v-if="detailData.status==11">
			<view class="cancel-view " :style="'height:'+navHeight-10+'px'+';'">
				<text class="cancel_text ">{{$root.g2}}</text>
			</view>
		</view>
		<view class="cancel " :style="'top:'+cacelBtnTop+'px'+';'+'height:'+navHeight+'px'+';'"
			v-if="detailData.status==0">
			<view class="cancel-view " :style="'height:'+navHeight-10+'px'+';'">
				<text class="cancel_text ">{{$root.g3}}</text>
			</view>
		</view>
		<view class="custom-box "
			:style="'padding-top:'+systemInfo.statusBarHeight+'px'+';'+'height:'+CustomBar+'px'+';'" v-if="showNav">
			<text class="custom-box_text "></text>
			<text class="custom-box_text " v-if="detailData.status==12||detailData.status==13">{{$root.g4}}</text>
			<text class="custom-box_text " v-if="detailData.status==16">{{$root.g5}}</text>
			<text class="custom-box_text " v-if="detailData.status==33">{{$root.g6}}</text>
			<text class="custom-box_text " v-if="detailData.status==44">{{$root.g7}}</text>
			<text class="custom-box_text " v-if="detailData.status==77">{{$root.g8}}</text>
			<text class="custom-box_text " v-if="detailData.status==88">{{$root.g9}}</text>
		</view>
		<view class="back2 "
			:style="'top:'+systemInfo.statusBarHeight+'px'+';'+'width:'+navHeight+'px'+';'+'height:'+navHeight+'px'+';'"
			v-if="showNav">
			<view class="back-view2 " :style="'width:'+navHeight-10+'px'+';'+'height:'+navHeight-10+'px'+';'">
				<view v-if="opt.source&&opt.source=='share'">{{$root.g10}}</view>
				<image mode class="backImg " src="../../static/new/jiantou2.png" v-else></image>
			</view>
		</view>
		<view class="main-box ">
			<view class="ml24 mr24 mt24 bgfff bdra20  " v-if="detailData.status==11">
				<view class="main-box-title  ">
					<view class="pt24 dsf alc  flex-row ">
						<view>
							<text class="main-box-title_text ">{{$root.g11}}</text>
						</view>
						<view>
							<u-loading-icon color="#38a0fb" mode="circle" textSize="18"></u-loading-icon>
						</view>
					</view>
				</view>
				<view class="main-box-title1 ">
					<text class="main-box-title_text1 col999 ">{{$root.g12+'!'}}</text>
				</view>
				<view class=" pt24 dsf alc jcsb flex-row  main-box-title pr24 mb24 bte1 ">
					<view class="flex-row ">
						<view class=" mauto ">
							<u-icon name="red-packet" size="28"></u-icon>
						</view>
						<view class="ml20  ">
							<view>
								<text class="main-box-title_text1 ">{{$root.g13}}</text>
							</view>
							<text class="fz24 col999 ">{{$root.g14}}</text>
						</view>
					</view>
					<view class="flex-row " style="align-items:center;">
						<view v-if="tipPrice==0">
							<text class="col999 fz26 ">{{$root.g15}}</text>
						</view>
						<view v-else>
							<text class="col999 fz26 ">{{$root.g16+tipPrice+$root.g17}}</text>
						</view>
						<view class="ml20 mauto ">
							<u-icon class="col999 " name="arrow-right" size="12"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="ml24 mr24 mt24 bgfff bdra20  " v-if="detailData.status==12||detailData.status==13">
				<view class="main-box-title ">
					<text class="main-box-title_text ">{{$root.g18}}</text>
				</view>
				<view class="main-box-title1 ">
					<text class="main-box-title_text1 ">{{$root.g19}}</text>
				</view>
			</view>
			<block v-else>
				<block v-if="detailData.status==16">
					<view class="ml24 mr24 mt24 bgfff bdra20  ">
						<view class="main-box-title  ">
							<text class="main-box-title_text ">{{$root.g20}}</text>
						</view>
						<view class="main-box-title1  ">
							<text class="main-box-title_text1 ">{{$root.g21}}</text>
						</view>
					</view>
					<time-keep :order="detailData" :waitdata="waitdata"></time-keep>
				</block>
			</block>
			<view class="ml24 mr24 mt24 bgfff bdra20  " v-if="detailData.status==33">
				<view class="main-box-title ">
					<text class="main-box-title_text ">{{$root.g22}}</text>
				</view>
				<view class="main-box-title1 ">
					<text class="main-box-title_text1 ">{{$root.g23}}</text>
				</view>
			</view>
			<block v-if="detailData.status==44">
				<view class="ml24 mr24 mt24 bgfff bdra20  ">
					<view class="main-box-title ">
						<text class="main-box-title_text ">{{$root.g24}}</text>
					</view>
					<view class="main-box-title1 ">
						<text class="main-box-title_text1 ">{{$root.g25}}</text>
					</view>
				</view>
				<time-keep :order="detailData" :waitdata="waitdata"></time-keep>
			</block>
			<view class="ml24 mr24 mt24 bgfff bdra20  " v-if="detailData.status==77">
				<view class="main-box-title ">
					<text class="main-box-title_text ">{{$root.g26}}</text>
				</view>
				<view class="main-box-title1 ">
					<text class="main-box-title_text1 ">{{$root.g27+'。'}}</text>
				</view>
			</view>
			<view class="ml24 mr24 mt24 bgfff bdra20  " v-if="detailData.status==88">
				<view class="main-box-title ">
					<text class="main-box-title_text ">{{$root.g28}}</text>
				</view>
				<view class="main-box-title1 ">
					<text class="main-box-title_text1 ">{{$root.g29+'!'}}</text>
				</view>
			</view>
			<view class="info mt24 ">
				<view class="info1-top " v-if="detailData.driverOrder&&detailData.driverOrder.driver">
					<view class="info1-top-left ">
						<image mode class="info1-top-left-img " :src="detailData.driverOrder.driver.avatar"></image>
					</view>
					<view class="info1-top-right ">
						<view class="info1-top-right1 ">
							<text class="info1-top-right1-t1 ">{{detailData.driverOrder.driver.driver_name}}</text>
							<text class="info1-top-right1-t2 ">{{detailData.driverOrder.driver.plate_number}}</text>
						</view>
						<view class="info1-top-right2 " v-if="detailData.vehicle">
							<text
								class="info1-top-right2-t1 ">{{detailData.vehicle.title+$root.g30+'*'+detailData.vehicle.width+'*'+detailData.vehicle.height+'m'}}</text>
						</view>
						<view class="info1-top-right3 ">
							<text
								class="info1-top-right3-t1 ">{{$root.g31+'：'+detailData.driverOrder.driver.service_mark}}</text>
						</view>
						<view class="info1-top-right-box ">
							<view class="info1-top-right-box-view ">
								<image mode class="info1-top-right-box-img " src="../../static/new/chat.png"></image>
							</view>
							<view class="info1-top-right-box-view ">
								<image mode class="info1-top-right-box-img " src="../../static/new/phone.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view v-if="!opt.source">
					<view class="info1-bottom " v-if="detailData.status!=11">
						<view class="info1-bottom-view ">
							<image mode class="info1-bottom-view-img " src="../../static/new/ljbj.png"></image>
							<text class="info1-bottom-view-text ">{{$root.g32}}</text>
						</view>
						<view class="info1-bottom-view ">
							<image mode class="info1-bottom-view-img " src="../../static/new/fxxc.png"></image>
							<text class="info1-bottom-view-text ">{{$root.g33}}</text>
							<button class="absolute t0 l0 w100b h100b zindex10 " openType="share"
								style="opacity:0;"></button>
						</view>
						<view class="info1-bottom " v-if="detailData.status==12||detailData.status==13">
							<view class="info1-bottom-view ">
								<image mode class="info1-bottom-view-img " src="../../static/new/qxdd.png"
									style="width:34rpx;"></image>
								<text class="info1-bottom-view-text ">{{$root.g34}}</text>
							</view>
							<view class="info1-bottom-view ">
								<image mode class="info1-bottom-view-img " src="/static/new/ghsj.png"></image>
								<text class="info1-bottom-view-text ">{{$root.g35}}</text>
							</view>
						</view>
						<view class="info1-bottom " v-if="!(detailData.status==12||detailData.status==13)">
							<view class="info1-bottom-view ">
								<image mode class="info1-bottom-view-img " src="../../static/new/od-d-icon1.png"
									style="width:34rpx;"></image>
								<text class="info1-bottom-view-text ">{{$root.g36}}</text>
							</view>
							<view class="info1-bottom-view ">
								<image mode class="info1-bottom-view-img " src="/static/new/od-d-icon4.png"></image>
								<text class="info1-bottom-view-text ">{{$root.g37}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<tip :order="detailData" v-show="tipshow"></tip>
			<view class="ml24 mr24 mb24 bgfff bdra20 ">
				<view class="dsf alc jcsb bbe1 pb24 pt24 flex-row pl24 pr24 ">
					<view>
						<text class="fz30 col333 ">{{$root.g38}}</text>
					</view>
					<view class="dsf alc jcc flex-row " v-if="!opt.source">
						<view class="pr5 ">
							<text class="fz26 col333  ">{{$root.g39+detailData.total_price+$root.g40}}</text>
						</view>
						<image mode class="ywbz-box-right-img " src="../../static/new/right-jt.png"></image>
					</view>
				</view>
				<view class="pl24 pr24 ">
					<view class="pt24 ">
						<view class="dsf alc flex-row ">
							<view class="w36 h36 dsf alc jcc " style="background-color:#333333;border-radius:18rpx;">
								<text class="fz24 colfff ">{{$root.g41}}</text>
							</view>
							<view class="pl20 ">
								<text class="fz28  ">{{detailData.place.delive.mapAddress}}</text>
							</view>
						</view>
						<view class="pt15 pl56 ">
							<text
								class="fz24 col666 ">{{detailData.place.delive.mapAddressDetail+detailData.place.delive.mapAddress}}</text>
						</view>
						<view class="pt15 pl56 " v-if="detailData.place.delive.receiveAddressDetail!=''">
							<text
								class="fz24 col666 ">{{$root.g42+' : '+detailData.place.delive.receiveAddressDetail}}</text>
						</view>
						<view class="pt15 pl56 ">
							<text
								class="fz24 col666 ">{{detailData.place.delive.userName+' '+detailData.place.delive.userPhone}}</text>
						</view>
					</view>
					<view class="pt24 ">
						<view class="pb24 " v-for="(item,index) in $root.l0">
							<view class="dsf alc flex-row ">
								<view class="w36 h36 dsf alc jcc " style="background-color:#0083fe;border-radius:18rpx;"
									v-if="index+1==item.g43">
									<text class="fz24 colfff ">{{item.g44}}</text>
								</view>
								<view class="w36 h36 dsf alc jcc " style="background-color:#999;border-radius:18rpx;"
									v-else>
									<text class="fz24 colfff ">{{item.g45}}</text>
								</view>
								<view class="pl20 ">
									<text class="fz28  ">{{item[$orig].mapAddress}}</text>
								</view>
							</view>
							<view class="pt15 pl56  ">
								<text
									class="fz24 col666 ">{{item[$orig].mapAddressDetail+'-'+item[$orig].mapAddress}}</text>
							</view>
							<view class="pt15 pl56  " v-if="item[$orig].receiveAddressDetail!=''">
								<text class="fz24 col666 ">{{item.g46+' : '+item[$orig].receiveAddressDetail}}</text>
							</view>
							<view class="pt15 pl56 fz24 col666 ">
								<text class="fz24 col666 ">{{item[$orig].userName+' '+item[$orig].userPhone}}</text>
							</view>
						</view>
					</view>
					<view class="pt24 dsf alc jcsb flex-row ">
						<view>
							<text class="fz28 col999 ">{{$root.g47}}</text>
						</view>
						<view class="dsf alc flex-row ">
							<view class="pr15 ">
								<text class="fz28 col333 ">{{detailData.order_number}}</text>
							</view>
							<view>
								<text class="col2270FC fz26 ">{{$root.g48}}</text>
							</view>
						</view>
					</view>
					<view class="pt24 dsf alc jcsb flex-row ">
						<text class="fz28 col999 ">{{$root.g49}}</text>
						<text class="fz28 col333 ">{{detailData.created_at}}</text>
					</view>
					<view class="pt24 dsf alc jcsb flex-row ">
						<text class="fz28 col999 ">{{$root.g50}}</text>
						<text class="fz28 col333 " v-if="detailData.vehicle">{{detailData.vehicle.title}}</text>
					</view>
					<view class="pt24 dsf alc jcsb flex-row ">
						<text class="fz28 col999 ">{{$root.g51}}</text>
						<text class="fz28 col2270FC ">{{detailData.remarks.followphone}}</text>
					</view>
					<view class="pt24 dsf alc jcsb flex-row ">
						<text class="fz28 col999 ">{{$root.g52}}</text>
						<text class="fz28 col333 ">{{''+detailData.appointment_time+''}}</text>
					</view>
					<view class="pt24 dsf alc jcsb flex-row ">
						<text class="fz28 col999 ">{{$root.g53}}</text>
						<text class="fz28 col333 ">{{''+detailData.freight_name+''}}<text class="fz28 col333 "
								v-if="detailData.type==2">{{'('+detailData.type_name+')'}}</text>
						</text>
					</view>
					<view class="pt24 dsf alc jcsb flex-row ">
						<text class="fz28 col999 ">{{$root.g54}}</text>
						<text class="fz28 col333 w480 my-tr ">{{''+($root.g55>0?$root.g56:'')+''}}</text>
					</view>
					<view class="pt24 bbe1  "></view>
				</view>
			</view>
			<view v-if="!opt.source">
				<expense :order="detailData"></expense>
			</view>
		</view>
		<u-modal :cancelText="$root.g59" :confirmText="$root.g58" :content="cancelcontent" v-show="cancelmodel"
			v-showCancelButton="true" :title="$root.g57+'?'"></u-modal>
		<u-modal :cancelText="$root.g63" :confirmText="$root.g62" :content="$root.g61+'!'" v-show="changeDrivermodel"
			v-showCancelButton="true" :title="$root.g60+'?'"></u-modal>
		<u-loading-page :loading="loading"></u-loading-page>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				user: {},
				navHeight: 50,
				systemInfo: {},
				mapHeight: 0,
				BackTop: 0,
				CustomBar: 0,
				opt: {},
				detailData: {},
				showNav: !1,
				loading: !1,
				tipshow: !1,
				tipPrice: 0,
				waitdata: {},
				longitude: 0,
				latitude: 0,
				markers: [],
				includePoints: [],
				polyline: [],
				cancelmodel: !1,
				cancelcontent: "",
				changeDrivermodel: !1,
				shareObj: {},
				isSocket: !0,
				vm: ""
			}
		},
		created: function() {
			this.vm = getApp().globalData.vm, this.cancelcontent = this.vm.$t("正在努力为你呼叫司机,稍等片刻") + "~";
			vara = t.getSystemInfoSync();
			this.navHeight = 50, this.CustomBar = a.statusBarHeight + this.navHeight, this.systemInfo = a, this
				.mapHeight = .8 * a.screenHeight, this.BackTop = a.statusBarHeight + 10
		},
		onLoad() {

		},
		onShow() {

		},

		methods: {

		}
	}
</script>

<style scoped lang="scss">
	label,
	scroll-view,
	swiper-item,
	view {
		align-content: flex-start;
		align-items: stretch;
		display: -webkit-flex;
		display: flex;
		flex-basis: auto;
		flex-direction: column;
		flex-grow: 0;
		flex-shrink: 0
	}

	image,
	input,
	scroll-view,
	swiper,
	swiper-item,
	text,
	textarea,
	video,
	view {
		border: 0 solid #000;
		box-sizing: border-box;
		position: relative
	}

	swiper-item {
		position: absolute
	}

	button {
		margin: 0
	}

	page {
		background-color: #eef2fd
	}

	.back {
		left: 30upx;
		position: fixed;
		top: 0;
		z-index: 99
	}

	.back-view,
	.back {
		align-items: center;
		justify-content: center
	}

	.back-view {
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 0 10upx #c8c8c8
	}

	.backImg {
		height: 30upx;
		width: 30upx
	}

	.cancel {
		align-items: center;
		position: fixed;
		right: 30upx;
		top: 0;
		z-index: 99
	}

	.cancel-view,
	.cancel {
		justify-content: center
	}

	.cancel-view {
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 0 0 10upx #c8c8c8;
		display: -webkit-flex;
		display: flex;
		padding-left: 24upx;
		padding-right: 24upx
	}

	.cancel_text {
		color: #333;
		font-size: 14px
	}

	.custom-box {
		align-items: center;
		background-color: #fff;
		box-sizing: border-box;
		justify-content: center;
		left: 0;
		padding: 0 30upx;
		position: fixed;
		top: 0;
		width: 750upx;
		z-index: 100
	}

	.custom-box_text {
		color: #333;
		font-size: 18px
	}

	.back2 {
		left: 30upx;
		position: fixed;
		top: 0;
		z-index: 102
	}

	.back-view2,
	.back2 {
		align-items: center;
		justify-content: center
	}

	.main-box {
		background-color: #eef2fd;
		position: relative
	}

	.main-box-title {
		padding-left: 20upx;
		padding-top: 30upx
	}

	.main-box-title_text {
		color: #333;
		font-size: 38upx;
		font-weight: 700
	}

	.main-box-title1 {
		padding-bottom: 38upx;
		padding-left: 20upx;
		padding-top: 16upx
	}

	.main-box-title_text1 {
		color: #333;
		font-size: 26upx
	}

	.info {
		background-color: #fff;
		border-radius: 10upx;
		margin-bottom: 24upx;
		margin-left: 24upx;
		margin-right: 24upx
	}

	.info1-top {
		align-items: center;
		border-bottom: 1px solid #e1e1e1;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		padding: 38upx 24upx 24upx
	}

	.info1-top-left {
		width: 120upx
	}

	.info1-top-left-img {
		height: 120upx;
		width: 120upx
	}

	.info1-top-right {
		box-sizing: border-box;
		padding-left: 28upx;
		position: relative;
		width: 534upx
	}

	.info1-top-right1 {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		width: 534upx
	}

	.info1-top-right1-t1 {
		color: #333;
		font-size: 28upx;
		font-weight: 700
	}

	.info1-top-right1-t2 {
		color: #666;
		font-size: 24upx;
		padding-left: 24upx
	}

	.info1-top-right2 {
		padding-top: 22upx
	}

	.info1-top-right2-t1 {
		color: #333;
		font-size: 28upx
	}

	.info1-top-right3 {
		padding-top: 16upx
	}

	.info1-top-right3-t1 {
		color: #999;
		font-size: 24upx
	}

	.info1-top-right-box {
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		height: 74upx;
		position: absolute;
		right: 0;
		top: 40upx
	}

	.info1-top-right-box-view {
		height: 74upx;
		margin-left: 24upx
	}

	.info1-top-right-box-img {
		height: 74upx;
		width: 74upx
	}

	.info1-bottom {
		display: -webkit-flex;
		display: flex;
		flex-direction: row
	}

	.info1-bottom-view {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		justify-content: center;
		padding-bottom: 30upx;
		padding-top: 34upx;
		width: 180upx
	}

	.info1-bottom-view-img {
		height: 32upx;
		width: 32upx
	}

	.info1-bottom-view-text {
		color: #666;
		font-size: 26upx;
		padding-top: 20upx
	}

	.ywbz-box {
		background-color: #fff;
		border-radius: 10upx;
		height: 124upx;
		justify-content: space-between;
		margin-bottom: 25upx;
		margin-left: 24upx;
		margin-right: 24upx
	}

	.ywbz-box-left,
	.ywbz-box {
		align-items: center;
		flex-direction: row
	}

	.ywbz-box-left-img {
		height: 56upx;
		width: 56upx
	}

	.ywbz-box-left-text {
		color: #333;
		font-size: 26upx
	}

	.ywbz-box-right {
		align-items: center;
		flex-direction: row;
		justify-content: center;
		padding-right: 30upx
	}

	.ywbz-box-right-img {
		height: 24upx;
		margin-left: 20upx;
		width: 13upx
	}

	.ywbz-box-right-text {
		color: #999;
		font-size: 26upx
	}

	.dd-info {
		background-color: #fff;
		border-radius: 10upx;
		margin-left: 24upx;
		margin-right: 24upx
	}

	.driver-label3,
	.star_five>view:last-child {
		margin-right: 0 !important
	}
</style>